<template>
   <div class="whole-page">
    <Tabs :currentIndex="currentIndex" @changeCurrentIndex="changeCurrentIndex" class="clear-fix">
      <tab tabName="健身圈" index="1" class="subone">
        <div class="page">         
           <FitRights/>
        </div>
      </tab>
      <tab tabName="关注" index="2" class="subtwo">
        <div class="page">
         <Attention/>
        </div>
      </tab>
      <tab tabName="附近" index="3" class="subthree">
        <div class="page">
          <Nearby/>
        </div>
      </tab>
    </Tabs>
    <FootNav/>
  </div>
</template>

<script>
import Vue from "vue";
import FootNav from "@/components/FootNav";
import Tabs from "@/components/tabs";
import Attention from "@/containers/Find/FindSubpage/Dynamic/DynamicSubpage/Attention";
import FitRights from "@/containers/Find/FindSubpage/Dynamic/DynamicSubpage/FitRights";
import Nearby from "@/containers/Find/FindSubpage/Dynamic/DynamicSubpage/Nearby";
Vue.use(Tabs);

export default {
  name: "Dynamic",
   data() {
    return {
      currentIndex: "1"
    }
  },
  components: {
    FootNav,
    Attention,
    // Tabs,
    FitRights,
    Nearby
  },
   methods: {
    changeCurrentIndex(index) {
      this.currentIndex = index
    }
  }
};
</script>

<style scoped lang="less">
.whole-page {
  width: 100%;
}
.clear-fix {
  width: 100%;
}
.tabs-header{
  left:0;
  top:50px;
}
.subone{
  left:0;
}
.subtwo{
  left:33%;
}
.subthree{
  left:66%;
}

li {
  // float: left;
  flex-grow: 1;
  // height: 3rem;
  // line-height: 3rem;
  padding:10px 0;
  font-size: 18/20rem;
  text-align: center;
  color: #7C7C7C;
  width: 34%;
  // box-shadow:0 2px 10px #7C7C7C;
  border-bottom:3px solid rgba(124,124,124,.3);
  top:57/20rem;
  position: fixed;
  background-color:  #f1f1f1;  
}
.page {
  clear: both;
  // margin-top: 3rem;
}
.active {
  color: black;
  // border: 0px solid white;
}
</style>